import React from 'react'
import PropTypes from 'prop-types'
import {Col, DatePicker, Form, Input, InputNumber, Modal, Radio, Row, Select} from 'antd'
import moment from 'moment'

const {Option} = Select
const {TextArea} = Input
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
}

const textAreaLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 22},
}

const modal = ({
                 item = {},
                 onOk,
                 roles,
                 departments,
                 disable,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      if (data.birthDay) {
        data.birthDay = moment(data.birthDay).format('YYYY-MM-DD')
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const getRoles = roles.map(item => (<Option value={item.id}>{item.name}</Option>))
  const getDepartments = departments.map(item => (<Option value={item.id}>{item.name}</Option>))

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="员工姓名">
              {getFieldDecorator('realname', {
                initialValue: item.realname,
                rules: [{required: true, message: '请输入员工姓名'}],
              })(<Input disabled={disable} placeholder="员工姓名"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="用户名">
              {getFieldDecorator('username', {
                initialValue: item.username,
                rules: [{required: true, message: '请输入登录用户名'}],
              })(<Input disabled={item.username ? true : disable} placeholder="登录用户名"/>)}
              {getFieldDecorator('id', {initialValue: item.id})(<input type='hidden'/>)}
            </FormItem>
          </Col>
          {
            !item.id ? <Col md={8} sm={24}>
              <FormItem {...formItemLayout} label="密码">
                {getFieldDecorator('password', {
                  initialValue: item.password,
                  rules: [{required: true, message: '请输入登录密码'}],
                })(<Input disabled={disable} type="password" placeholder="登录密码"/>)}
              </FormItem>
            </Col> : ""
          }
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="所属部门">
              {getFieldDecorator('dept.id', {
                initialValue: item && item.role ? item.dept.id : undefined,
                rules: [{required: true, message: '所属部门不能为空'}],
              })(
                <Select disabled={disable} placeholder="请选择部门" style={{width: '100%'}}>
                  {getDepartments}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="角色">
              {getFieldDecorator('role.id', {
                initialValue: item && item.role ? item.role.id : undefined,
                rules: [{required: true, message: '请为该员工分配角色'}],
              })(
                <Select disabled={disable} placeholder="请选择角色" style={{width: '100%'}}>
                  {getRoles}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="手机号">
              {getFieldDecorator('phoneNum', {initialValue: item.phoneNum})(
                <InputNumber disabled={disable} style={{width: '100%'}} placeholder="手机号"/>,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="年龄">
              {getFieldDecorator('age', {initialValue: item.age})(
                <InputNumber disabled={disable} style={{width: '100%'}} placeholder="年龄"/>,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="性别">
              {getFieldDecorator('gender', {initialValue: item.gender})(<Radio.Group>
                <Radio disabled={disable} value={1}>男</Radio>
                <Radio disabled={disable} value={2}>女</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="邮箱">
              {getFieldDecorator('email', {
                initialValue: item.email,
                rules: [{type: 'email', message: '请输入正确的邮箱地址'}],
              })(<Input disabled={disable} placeholder="电子邮箱"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="生日">
              {getFieldDecorator('birthDay', {initialValue: item.birthDay ? moment(item.birthDay, 'yyyy-MM-dd') : undefined})(
                <DatePicker disabled={disable} style={{width: '100%'}} placeholder="员工生日"/>,
              )}
            </FormItem>
          </Col>
          <Col md={24} sm={24}>
            <FormItem {...textAreaLayout} label="描述">
              {getFieldDecorator('description', {initialValue: item.description})(<TextArea disabled={disable} rows={4}
                                                                                            placeholder="描述信息"/>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
